/**
 * 服务区域组件
 * 
 * 功能描述：
 * - 展示医疗服务项目的区域容器组件
 * - 包含标题、描述和网格布局的服务卡片
 * - 使用3列网格布局展示服务项目
 * - 提供统一的视觉样式和间距
 * 
 * 使用场景：
 * - 首页核心服务展示区域
 * - 医疗服务分类页面
 * - 功能模块的批量展示
 * 
 * 作者：系统
 * 创建时间：2024
 */

import ServiceCard from './ServiceCard';

// 内联类型定义
interface Service {
  id: string;
  name: string;
  icon: string;
  description: string;
  tag?: string;
}

interface ServicesSectionProps {
  services: Service[];
}

export default function ServicesSection({ services }: ServicesSectionProps) {
  return (
    <div className="bg-white px-6 py-8 mx-4 rounded-2xl shadow-sm">
      <div className="text-center mb-6">
        <h2 className="text-xl font-bold text-gray-900 mb-2">核心服务</h2>
        <p className="text-sm text-gray-500">为您提供全方位的医疗服务</p>
      </div>
      <div className="grid grid-cols-3 gap-6">
        {services.map((service) => (
          <ServiceCard key={service.id} service={service} />
        ))}
      </div>
    </div>
  );
} 